import React, { Component } from 'react'
import reactDom from 'react-dom'

export default class OldLive extends Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
    console.log('1 构造函数')
  }
  componentWillReceiveProps(a,b) {
    console.log('OldLive组件的父组件数据更新了')
    console.log(a, b)
  }
  componentWillMount() {
    console.log('2 willMount组件')
  }
  componentDidMount() {
    console.log('4 DidMount组件')
  }
  componentWillUnmount() {
    console.log('5 WillUnmount组件')
  }

  shouldComponentUpdate() {
    // this.forceUpdate()
    console.log('组件是否应该被更新')
    return true
  }

  componentWillUpdate() {
    console.log('数据将要更新')
  }
  componentDidUpdate() {
    console.log('数据更新完成')
  }

  render() {
    console.log('3 render函数')
    const {count} = this.state
    return (
      <div id="countContainer">
        <h1>旧版本生命周期</h1>
        <h3>计数器:{count}</h3>
        <button onClick={() => this.setState({count: count+1})}>+1</button>
        <button onClick={this.unMountPage}>卸载组件</button>
        <Temp/>
      </div>
    )
  }
  unMountPage = () => {
    reactDom.unmountComponentAtNode(document.getElementById('root'))
  }
}


 class Temp extends Component {
   componentWillReceiveProps(a,b) {
     console.log('父组件数据更新了')
     console.log(a, b)
   }
  render() {
    return (
      <div>
        <h2>我是Temp组件</h2>
      </div>
    )
  }
}
